<template>
  <div class="common-layout">
    <el-container>
      <el-aside v-if="showSidebar" class="side" width="collapse">
        <!-- 侧边栏 -->
        <NarBar ref="narbar" />
      </el-aside>
      <el-container>
        <el-header v-if="showSidebar" class="header">
          <img src="@/assets/images/kailogo.png" alt="College Logo" class="logo" />
          <nav class="nav">
            <ul>
              <li>
                <RouterLink to="/credits">积分充值</RouterLink>
              </li>
              <li>
                <RouterLink to="/VIP">会员充值</RouterLink>
              </li>
              <li>
                <RouterLink to="/personalCenter">个人中心</RouterLink>
              </li>
              <li>
                <RouterLink to="/">退出</RouterLink>
              </li>
            </ul>
          </nav>
          <!-- <el-button @click="updateNarBar">折叠</el-button> -->

        </el-header>

        <el-main
          :style="{ 'padding-left': showSidebar ? '210px' : '0px', 'padding-top': showSidebar ? '60px' : '0px' }">
          <!-- 内容 -->
          <router-view />
          <!-- <CollegePaperRank /> -->
          <!-- <ActivityAnnouncement /> -->
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>



<script setup>
import { RouterView, useRoute, RouterLink } from "vue-router";
import { ref, watch } from "vue";
import NarBar from "@/components/NarBar.vue";
// import PersonalCenter from './views/personalCenter.vue';

const route = useRoute();
const narbar = ref(null);
const showSidebar = ref(true);


watch(
  route,
  (newRoute) => {
    showSidebar.value = newRoute.meta.requiresSidebar ?? true;
  },
  { immediate: true }
);

const updateNarBar = () => {
  narbar.value.isCollapse = !narbar.value.isCollapse;
};
</script>

<style>
.el-main {
  padding: 0px;
}

* {
  padding: 0%;
  margin: 0%;
}


.header {
  text-align: center;
  background-color: #fff;
  border-bottom: 1px solid #ddd;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: linear-gradient(135deg, #42e695, #3bb2b8);
  border-bottom: #cfcfcfbd 1px solid;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
}

.nav {
  text-align: center
}

.logo {
  text-align: center;
  height: 40px;
}

.nav ul {
  list-style: none;
  padding: 0;
}

.nav li {
  display: inline-block;
  margin-right: 1rem;
}

.nav a {
  text-decoration: none;
  color: #ffffff;
}

.school-logo {
  width: 100px;
  height: 100px;
  object-fit: contain;
}

.head h1 {
  font-size: 2rem;
  color: #a5c5cd;
  margin: 0;
}

.side {
  width: 210px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  height: 100vh;
  background-color: #fff;
  border-right: 1px solid #ddd;
  transition: width 0.3s;
}
</style>
